import React from 'react'
import { Modal, Form, Input } from 'antd'

function PageModal({ visible, handleOk, handleCancel, item, ...modalProps }) {
  const [form] = Form.useForm()

  const onOk = (item) => {
    console.log('item', item)
    handleOk(item)
  }


  const onCancel = () => {
    handleCancel()
  }

  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  }

  return (
    <Modal
      visible={visible}
      onOk={form.submit}
      onCancel={onCancel}
      {...modalProps}
    >
      <Form
        {...layout}
        form={form}
        onFinish={onOk}
      >
        <Form.Item
          label="导航名称"
          name="name"
          initialValue={item.name}
          rules={[{ required: true, message: '请输入导航名称!' }]}
        >
          <Input autoComplete="off" placeholder="请输入导航名称" />
        </Form.Item>

        <Form.Item
          label="导航路径"
          name="path"
          initialValue={item.code}
          rules={[{ required: true, message: '请输入导航路径!' }]}
        >
          <Input autoComplete="off" placeholder="请输入导航路径" />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default PageModal
